<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>选择-教师-错题集</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <style type="text/css">
        html,
        body {
            background: rgba(90, 194, 255, 1);
        }

        .vueApp {
            padding-bottom: 10px;
        }
        
        .wrapper {
            padding: 25px 15px 50px 15px;
        }
        
        .items {
            padding: 10px 11px;
            background: rgba(255, 255, 255, 1);
            box-shadow: 0px 4px 10px 0px rgba(0, 135, 214, 0.37);
            border-radius: 10px;
        }
        
        .item {
            position: relative;
            height: 50px;
        }

        .item::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background: rgb(212, 212, 212);
            transform: scaleY(0.5);
        }
        
        .item:last-of-type::after {
            display: none;
        }
        
        .txt {
            font-weight: bold;
            color: rgba(25, 25, 25, 1);
            font-size: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        
        .select {
            font-size: 15px;
            font-weight: 400;
            color: rgba(191, 191, 191, 1);
        }

        .select.value {
            color: #222224;
        }
        
        .select-img {
            width: 17px;
            height: 16px;
            margin-left: 8px;
        }
        
        .btn {
            width: 210px;
            height: 46px;
            background-image: url("../../image/ui/btn.png");
            background-size: 100% 100%;
            font-size: 18px;
            font-weight: 600;
            color: rgba(124, 69, 0, 1);
            margin: 0 auto;
            line-height: 42px;
            box-shadow: 0px 5px 7px 0px rgba(11, 126, 193, 0.53);
            border-radius: 22px;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="wrapper">
            <div class="items">
                <div v-if="type == 2" class="item" data-flex="main:justify cross:center">
                    <div class="txt" data-flex-box="1">班级</div>
                    <div :class="classText ? 'select value' : 'select'" data-flex="cross:center" onclick="openPicker('1')">
                        {{classText ? classText : '请选择班级'}}
                        <img class="select-img" src="../../image/course/icon_right.png" alt="">
                    </div>
                </div>
                <div class="item" data-flex="main:justify cross:center">
                    <div class="txt" data-flex-box="1">学期</div>
                    <div :class="courseText ? 'select value' : 'select'" data-flex="cross:center main:right" onclick="openPicker('2')">
                        {{courseText ? courseText : '请选择学期'}}
                        <img class="select-img" src="../../image/course/icon_right.png" alt="">
                    </div>
                </div>
                <div class="item" data-flex="main:justify cross:center">
                    <div class="txt" data-flex-box="1">单元</div>
                    <div :class="unitText ? 'select value' : 'select'" data-flex="cross:center main:right" onclick="openPicker('3')">
                        {{unitText ? unitText : '请选择单元'}}
                        <img class="select-img" src="../../image/course/icon_right.png" alt="">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn" onclick="handleNext()" data-flex="main:center">下一步</div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, selType;
    var classData,semesterData,unitData, isClick = true;
    var pageParam = {};
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        
        fnInit();
    };
    // 初始化
    function fnInit() {
        vm = new Vue({
            el: '.vueApp',
            data: {
                type: USER.Get('memberType', true),
                classText: '',
                classCode: '',
                classIndex: '',
                courseText: '',
                courseCode: '',
                courseIndex: '',
                unitText: '',
                unitCode: '',
                unitIndex: ''
            }
        });
        if(vm.type == 2) {
            getClassData();
        }
        getSemesterData();
        if(vm.type == 1) {
            var data = api.getPrefs({key: 'stu_select_local', sync: true});
            data = JSON.parse(data || '{}');
            if(data.courseCode) {
                // 本地缓存
                vm.courseText = data.courseText;
                vm.courseCode = data.courseCode;
                vm.unitText = data.unitText;
                vm.unitCode = data.unitCode;
                getUnitData();
            }else {
                // 最后一个激活的课程
                getLastActiveCourse();
            }
        }
    }

    // 获取最后一个激活的课程
    function getLastActiveCourse() {
        var url = 'course/findUserLastActiveCourse';
        var params = {};
        var callback = function(data) {
            if(data.id) {
                vm.courseCode = data.id;
                vm.courseText = data.courseName;
                getUnitData(-1);
            }
        };
        POST(url, params, callback);
    }

    // 查看报告
    function handleNext() {
        if(vm.unitText !== '' && vm.courseText !== '' && (vm.type === '2' ? vm.classText !== '' : true)) {
            if(vm.type == 1) {
                // 学生保存选中
                api.setPrefs({
                    key: 'stu_select_local',
                    value: JSON.stringify({
                        courseText: vm.courseText,
                        courseCode: vm.courseCode,
                        unitText: vm.unitText,
                        unitCode: vm.unitCode,
                    })
                });
            }
            if(pageParam.error && vm.type == 1) {
                fnOpenPublicWin('错题报告','question/question_menus', {
                    error: '1',
                    id: vm.unitCode
                });
            }else if(pageParam.error && vm.type == 2) {
                fnOpenPublicWin('错题报告','class/review_data', {
                    error: '1',
                    id: vm.unitCode,
                    classId: vm.classCode,
                    reportType: '13'
                });
            }else if(pageParam.from == 'index') {
                // 首页
                var title = pageParam.reportType == 1 ? '习题报告' : '跟读报告';
                var params = { 
                    isBtn: pageParam.reportType == 1 ? true : false,
                    btnName: '错题集',
                    headerFn: 'handleRightBtn',
                    classText: vm.classText,
                    classCode: vm.classCode,
                    classIndex: vm.classIndex,
                    courseText: vm.courseText,
                    courseCode: vm.courseCode,
                    courseIndex: vm.courseIndex,
                    unitText: vm.unitText,
                    unitCode: vm.unitCode,
                    unitIndex: vm.unitIndex,
                    classData: classData,
                    semesterData: semesterData,
                    reportType: pageParam.reportType,
                    from: pageParam.from
                };
                fnOpenPublicWin(title, 'class/report_detail', params);

            }else if(pageParam.from == 'class') {
                // 班级
                var title = pageParam.reportType == 1 ? '习题报告' : '跟读报告';
                fnOpenPublicWin(title, 'class/report_detail', {
                    classText: vm.classText,
                    classCode: vm.classCode,
                    classIndex: vm.classIndex,
                    courseText: vm.courseText,
                    courseCode: vm.courseCode,
                    courseIndex: vm.courseIndex,
                    unitText: vm.unitText,
                    unitCode: vm.unitCode,
                    unitIndex: vm.unitIndex,
                    classData: classData,
                    semesterData: semesterData,
                    reportType: pageParam.reportType,
                    from: pageParam.from
                });
            }
        } else {
            fnToast('不能有空的选择项');
        }
    }

    // 获取班级列表
    function getClassData() {
        var url = 'clsClass/findClassesList';
        var params = {};
        var callback = function(data) {
            var arr = [];
            data.listData.forEach(function(item, index) {
                arr.push(
                    {
                        name: item.classesName,
                        id: item.id,
                        index: index
                    }
                );
            });
            classData =  arr;
        };
        POST(url, params, callback);
    }

    // 获取课程列表
    function getSemesterData() {
        var url = 'course/findIndexCourseList';
        var params = {};
        var callback = function(data) {
            var arr = [];
            data.listData.forEach(function(item,index) {
                arr.push(
                    {
                        name: item.courseName,
                        id: item.id,
                        index: index
                    }
                );
            });
            semesterData = arr;
        };
        POST(url, params, callback);
    }

    // 获取单元列表
    function getUnitData(type) {
        var url = 'course/findCourseChild';
        var params = {
            'courseParentId': vm.courseCode
        };
        var callback = function(data) {
            var arr = [];
            data.listData.forEach(function(item,index) {
                arr.push(
                    {
                        name: item.courseName,
                        id: item.id,
                        index: index
                    }
                );
            });
            unitData = arr.length > 0 ? arr : 'undefined';
            if(type == -1 && arr.length > 0) {
                var item = unitData[0];
                vm.unitText = item.name;
                vm.unitCode = item.id;
            }
        };
        POST(url, params, callback);
    }

    function pickerCallback(name, code, index) {
        var sel = {name:name,code:code,index:index};
        switch(selType) {
            case '1':
                vm.classText = sel.name;
                vm.classCode = sel.code;
                vm.classIndex = sel.index;
                break;
            case '2':
                vm.courseText = sel.name;
                vm.courseCode = sel.code;
                vm.courseIndex = sel.index;
                vm.unitText = '';
                vm.unitCode = '';
                getUnitData();
                break;
            case '3': 
                vm.unitText = sel.name;
                vm.unitCode = sel.code;
                vm.unitIndex = sel.index;
                break;
        }
    }

    function openPicker(type) {
        // 避免用户连续点击
        if(isClick !== true) {
            return;
        }
        isClick = false;
        selType = type;
        var listData = [];
        if(vm.courseText == '' && type == '3') {
            fnToast('请先选择学期');
            delayClick();
            return;
        }
        if(unitData === 'undefined' && type == '3') {
            delayClick();
            return;
        }
        switch(type) {
            case '1':
                listData = classData;
                break;
            case '2':
                listData = semesterData;
                break;
            case '3':
                listData = unitData;
                break;
        }
        if(type == '1' && listData.length === 0) {
            fnToast('请先创建班级');
            delayClick();
            return;
        }
        fnOpenFrame({
            name: 'picker',
            url: '../mine/info_layer.html',
            rect: {
                x: 0, y: 0, w: 'auto', h: 'auto'
            },
            pageParam: {
                frameName: api.frameName,
                winName: api.winName,
                listData: listData,
                val: null
            }
        });
        delayClick();
    }

    function delayClick() {
        setTimeout(function() {
            isClick = true;
        },500)
    }
</script>

</html>